<template>
	<view class="list">
    <uni-fab
        :pattern="pattern"
        :content="content"
        horizontal="right"
        vertical="top"
        direction="horizontal"
        @trigger="triggerShow"
    ></uni-fab>
    <uni-section title="" >
      <template v-if="showWay">
        <uni-card v-for="(form,index) in entries" :key="form.entryId" :title="form.title" sub-title="" :extra="form.reminderDate" padding="10px 0" >
          <uni-swiper-dot class="uni-swiper-dot-box" mode="round" :info="form.imagePaths"
                          :dots-styles="{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					}" field="content">
            <swiper class="swiper-box" @change="changeImage" >
              <swiper-item v-for=" urlImg in form.imagePaths" >
                <image style="width: 100%;" :src="urlImg"/>
              </swiper-item>
            </swiper>
          </uni-swiper-dot>
          <text
              class="uni-body uni-mt-5" v-html="form.richContent" />
          <view slot="actions" class="card-actions">
            <view class="card-actions-item" @click="actionsClick('分享')">
              <uni-icons type="redo" size="18" color="#999"></uni-icons>
              <text class="card-actions-item-text">分享</text>
            </view>
            <view class="card-actions-item" @click="actionsClick('点赞')">
              <uni-icons type="heart" size="18" color="#999"></uni-icons>
              <text class="card-actions-item-text">点赞</text>
            </view>
            <view class="card-actions-item" @click="actionsClick('评论')">
              <uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
              <text class="card-actions-item-text">评论</text>
            </view>
          </view>
        </uni-card>
      </template>
      <template v-else>
        <uni-list class="uni-list--waterfall">
          <uni-list-item v-for="form in entries" :key="form.entryId" :border="false" class="uni-list-item--waterfall"   >
            <!-- 通过header插槽定义列表左侧图片 -->
            <template v-slot:header>
              <navigator  :url="'/pages/index/entries/detail?entryId='+form.entryId" hover-class="navigator-hover" >
                <view class="uni-thumb entries-picture entries-picture-column">
                  <uni-swiper-dot class="uni-swiper-dot-box" mode="round" :info="form.imagePaths"
                                  :dots-styles="{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					}" field="content">
                    <swiper class="swiper-box" @change="changeImage" >
                      <swiper-item v-for=" urlImg in form.imagePaths" >
                        <image style="width: 100%;" :src="urlImg"/>
                      </swiper-item>
                    </swiper>
                  </uni-swiper-dot>
                </view>
              </navigator>
            </template>
            <!-- 通过body插槽定义布局 -->
            <template v-slot:body>
              <view class="entries">
                <view>
                  <view class="uni-title">
                    <text class="uni-ellipsis-2">{{ form.title }}</text>
                  </view>
                </view>
                <view>
                  <view class="entries-content">
                    <text class="entries-content-text">{{  }}</text>
                  </view>
                  <view class="uni-note">{{form.reminderDate}} </view>
                  <view class="uni-note ellipsis">
                    <text class="uni-ellipsis-1">{{  }}</text>
                    <text class="uni-link"> </text>
                  </view>
                </view>
              </view>
            </template>
          </uni-list-item>

        </uni-list>
      </template>


    </uni-section>
	</view>
</template>

<script>
import config from '@/config'
import {listEntries} from "@/api/base/entries";
import UniFab from '@/uni_modules/uni-fab/components/uni-fab/uni-fab'

export default {
  components: {
    UniFab
  },
  data() {
    return {
      entries:[],
      gutter: 0,
      current: 0,
      nvueWidth: 730,
      baseUrl: config.baseUrl,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 悬浮按钮内容
      content: [{
        iconPath: '',
        selectedIconPath: '',
        showExtraIcon: true,
        extraIcon: {
          type: 'icon-qiuchuizhisuofang',
          customPrefix: 'iconfont',
          color: '#d00c0c',
          size: 20
        },
        text: '布局',
        active: false
      },
      ],
      pattern: {
        color: '#7A7E83',
        backgroundColor: '#fff',
        selectedColor: '#007AFF',
        buttonColor: '#007AFF',
        iconColor: '#fff',
        icon: 'pyq'
      },
      showWay: true,
    }
  },
  onReady() {
    
  },
  onLoad() {
    // 初始化数据
    this.getListEntries();
  },
  methods: {
    getListEntries() {
      listEntries(this.queryParams).then(res => {
        this.entries = res.rows;
        //循环把图片地址做拼接
        this.entries.forEach(item => {
          let real_src_list = item.imagePaths.split(",");
          let srcList = [];
          real_src_list.forEach(item => {
            return srcList.push(this.baseUrl + item);
          });
          item.imagePaths = srcList;
        });
        console.log("动态",this.entries)
      });
    },
    // 点击的图片
    changeImage(value){
      console.log("点击的图片",value)
    },
    // 左右布局切换
    triggerShow(){
      this.showWay = !this.showWay;
    },
    // 滑到底部加载
    load() {

    },
      
    },
  }

</script>

<style lang="scss">
@import '@/common/uni-ui.scss';

page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #efeff4;
  min-height: 100%;
  height: auto;
}

.tips {
  color: #67c23a;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  background-color: #f0f9eb;
  height: 0;
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.3s;
}

.tips-ani {
  transform: translateY(0);
  height: 40px;
  opacity: 1;
}

.entries {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.entries-picture {
  width: 110px;
  height: 110px;
}

.entries-picture-column {
  width: 100%;
  height: 170px;
  margin-bottom: 10px;
}

.entries-content {
  margin-top: 5px;
  font-size: 12px;
  color: #ff5a5f;
}

.entries-content-text {
  font-size: 16px;
}

.hot-tag {
  background: #ff5a5f;
  border: none;
  color: #fff;
}

.button-box {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  background: #007AFF;
  color: #fff;
}

.uni-link {
  flex-shrink: 0;
}

.ellipsis {
  display: flex;
  overflow: hidden;
}

.uni-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.uni-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}


// 默认加入 scoped ，所以外面加一层提升权重
.list {
  .uni-list--waterfall {

    /* #ifndef H5 || APP-VUE */
    // 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
    ::v-deep .uni-list {
      /* #endif */
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 5px;
      box-sizing: border-box;

      /* #ifdef H5 || APP-VUE */
      // h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透
      ::v-deep
        /* #endif */
      .uni-list-item--waterfall {
        width: 50%;
        box-sizing: border-box;
        .uni-list-item__container {
          display: flex;
          padding: 5px;
          flex-direction: column;
        }

      }

      /* #ifndef H5 || APP-VUE */
    }
    /* #endif */
  }
}
.container {
  overflow: hidden;
}

.custom-cover {
  flex: 1;
  flex-direction: row;
  position: relative;
}

.cover-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background-color: rgba($color: #000000, $alpha: 0.4);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 15px;
  font-size: 14px;
  color: #fff;
}

.card-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 45px;
  border-top: 1px #eee solid;
}

.card-actions-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.card-actions-item-text {
  font-size: 12px;
  color: #666;
  margin-left: 5px;
}

.cover-image {
  flex: 1;
  height: 150px;
}

.no-border {
  border-width: 0;
}
</style>